<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layuis/css/layui.css">
    <!--    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">-->
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">后台信息管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>

            <!--        <ul class="layui-nav layui-layout-left" id="myPopup">-->
            <li class="layui-nav-item">
                <a width="86px" height="75px" th:href="@{/index}">主页</a>
            </li>
<!--            <li th:class="${activeUrl == 'blog' ? 'layui-nav-item active' : 'layui-nav-item'}">-->
<!--                <a width="86" height="75" th:href="@{/question}">问答</a></li>-->
            <!--            <li th:class="${activeUrl == 'download' ? 'layui-nav-item active' : 'layui-nav-item'}">-->
            <!--                <a  width="86px" height="75px" th:href="@{/blog}">博客</a></li>-->
            <li th:class="${activeUrl == 'say' ? 'layui-nav-item active' : 'layui-nav-item'}">
                <a width="86px" height="75px" th:href="@{/say}">公告</a></li>
        </ul>
        <ul class="layui-layout-right layui-nav" style="z-index: 19891016">
            <li class=" layui-nav-item">
                <a style="text-decoration: none; float: right; margin-right: 50px" href="#" id="" role="button">
                    <img th:src="${session.loginUser.getAvatar()}"
                         style="width: 30px;height:30px;border-radius: 50%;" alt="头像">
                    <span sec:authentication="name"></span>
                    <dl class="layui-nav-child" style="margin-left: 20px">
                        <dd>
                            <a class="" th:href="@{'/user/'+${session.loginUser.getUid()}}">个人中心</a>
                            <a class=""
                               th:href="@{'/userinfo/setting/'+${session.loginUser.getUid()}}">更新资料</a>
                            <a class=""
                               th:href="@{'/user/update-avatar/'+${session.loginUser.getUid()}}">头像上传</a>
                            <div class=""></div>
                            <a class="" th:href="@{/logout}">注销</a>
                        </dd>
                    </dl>
            </li>
        </ul>
        <!--如果未登录-->
        <div sec:authorize="!isAuthenticated()">
            <a class="btn btn-sm btn-primary" th:href="@{/toLogin}" role="button">
                <svg class="bi bi-person-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                          d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                </svg>
                登录
            </a>
        </div>

        <!--如果已登录-->
        <div sec:authorize="isAuthenticated()" class="layui-hide">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown ">
                    <a style="text-decoration: none; float: right; margin-right: 50px" class="nav-link dropdown-toggle"
                       href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        <img th:src="${session.loginUser.getAvatar()}"
                             style="width: 30px;height:30px;border-radius: 50%;" alt="头像">
                        <span sec:authentication="name"></span>
                        <!--<span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></span>-->
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" th:href="@{'/user/'+${session.loginUser.getUid()}}">个人中心</a>
                        <a class="dropdown-item"
                           th:href="@{'/userinfo/setting/'+${session.loginUser.getUid()}}">更新资料</a>
                        <a class="dropdown-item"
                           th:href="@{'/user/update-avatar/'+${session.loginUser.getUid()}}">头像上传</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" th:href="@{/logout}">注销</a>
                    </div>
                </li>
            </ul>
        </div>

        <div th:each="blog:${blogList}" class="media text-muted pt-3">
            <!-- 头像 -->
            <img th:src="${blog.getAuthorAvatar()}" style="border-radius: 5px " width="32" height="32">
            <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
                <!-- 标题 -->
                <a th:text="${blog.getTitle()}"
                   th:href="@{'/blog/read/'+${blog.getBid()}}"
                   class="text-dark font-weight-bold text-decoration-none d-block">
                </a>
                <!-- 浏览量 -->
                <span>
                            <svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg">
                              <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                              <path fill-rule="evenodd"
                                    d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                            </svg>
                            [[${blog.getViews()}]]
                        </span>
                <!-- 时间 -->
                <span th:text="${#dates.format(blog.getGmtUpdate(),'yyyy-MM-dd')}"
                      class="badge badge-light float-right">
                        </span>
            </p>
        </div>
        <!-- 内容主体区域 -->
        <!-- 查询表 -->
        <br>
        <br>
        <br>
        <div class="">
            <div style="padding: 15px;">
                <div class="layui-col-xs8 layui-col-sm8 layui-col-md12">
                    <!-- 搜索开始 -->
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>查询条件</legend>
                    </fieldset>
                    <div class="searchTable">
                        请输入用户名：
                        <div class="layui-inline">
                            <input class="layui-input" name="keyword" id="searchReload">
                        </div>
                        <button class="layui-btn" id="searchBtn">搜索</button>
                        <div class=""></div>
                    </div>
                    <!-- 搜索结束 -->

                    <!-- 数据表格开始 -->
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                    <script type="text/html" id="toolbarDemo" style="z-index: 19891016">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="add">增加</button>
                            <!--<button class="layui-btn layui-btn-sm" lay-event="batchDel">批量删除</button>-->
                        </div>
                    </script>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    <!-- 数据表格结束 -->

                    <!-- 添加和修改的淡出层开始 -->
                    <div style="display: none;" id="saveOrupdateDiv">
                        <form class="layui-form" action="" lay-filter="dataForm" id="dataForm" method="POST">
                            <div class="layui-form-item">
                                <br>
                                <div class="layui-inline">
                                    <label class="layui-form-label">公司名称：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" autocomplete="off" lay-verify="required"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">公司地址：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="address" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">注册资金：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="rcl" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">资质等级：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="ql" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">联系人：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="cp" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">联系电话：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="ct" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">邮箱：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="email" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">主要案例：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="mc" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">项目类别：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="ic" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">优势服务区域：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="asa" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" align="center">
                                    <button type="button"
                                            class="layui-btn  layui-btn-normal layui-btn-sm layui-icon layui-icon-search"
                                            lay-filter="doSubmit" lay-submit>提交
                                    </button>
                                    <button type="reset"
                                            class="layui-btn layui-btn-primary layui-btn-sm  layui-icon layui-icon-refresh">
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
</body>
<script th:src="@{/js/jquerys.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<!-- 添加和修改的淡出层结束 -->

</html>
<script src="/layuis/layui.all.js" charset="utf-8"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;
        var $ = layui.jquery;
        // 绑定时间选择器
        laydate.render({
            elem: '#startDate'
        })
        laydate.render({
            elem: '#endDate'
        })
        var tableIns = table.render({
            elem: '#test'
            , url: '/hello2'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , title: '学生信息表'
            , loading: true
            , height: 'full-300'
            , cols: [
                [
                    // { field: 'wid', title: 'ID' , width: 100},
                    {field: 'name', title: '公司名称', width: 200},
                    {field: 'address', title: '公司地址', width: 200},
                    {field: 'rcl', title: '注册资金(万元)', width: 100},
                    {field: 'ql', title: '资质等级', width: 100},
                    {field: 'cp', title: '联系人', width: 100},
                    {field: 'ct', title: '联系电话', width: 180},
                    {field: 'email', title: '邮箱', width: 180},
                    {field: 'mc', title: '主要案例', width: 100},
                    {field: 'ic', title: '项目类别', width: 100},
                    {field: 'asa', title: '优势服务区域', width: 200},
                    {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#barDemo'}
                ]
            ],
            where: {},
            page: true
        });

        //头工具栏事件，添加，批量删除
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            console.log(data);
            console.log(checkStatus);
            switch (obj.event) {
                case 'add':
                    openAddUser();
                    break;
                case 'userIndex':
                    openUserIndex();
                    break;
                case 'batchDel':
                    layer.confirm('批量删除后不可恢复，谨慎操作！', {icon: 7, title: '警告'}, function (index) {
                        var data = checkStatus.data;
                        var dataObj = {};
                        data.forEach((item, i) => {
                            dataObj[i] = item.id;
                        })
                        // var json = JSON.stringify(dataObj);  //直接对象就行，也不知道为啥
                        $.ajax({
                            type: 'POST',
                            url: '/delete?id=batchDel',
                            // url: './data.php?action=batchDel',
                            data: dataObj,  //{'1':'2','3':'4'}
                            dataType: 'json',
                            success() {
                                tableIns.reload()
                                layer.msg('成功');
                            },
                            error: function () {
                                layer.msg('失败');
                            },
                        });
                        // 关闭弹窗
                        layer.close(index);
                    });
                    break;
            }
            ;
        });

        //监听行工具事件 ，删除一行，修改数据
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            console.log(data)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    // 删除数据
                    $.post("/delete/", {"wid": data.wid}, function (data) {
                        obj.del();
                        layer.msg(data.message);
                    }, "json");
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                openUpdateUser(data);
            }
        });
        // 保存
        form.on('submit(doSubmit)', function (data) {
            // 序列化表单数据
            var params = $('#dataForm').serialize();
            $.post(url, params, function (data) {
                // layer.msg(data);
                // 关闭弹出层
                layer.close(mainIndex);
                // 刷新数据表格(c重载)
                tableIns.reload()
            })
        });

        //搜索
        $("#searchBtn").on('click', function () {
            var val = $("#searchReload").val();
            var url = "/admin/selectByName/";
            // var url = '/hello2';
            console.log(url);
            // 重载数据
            tableIns.reload({
                id: '#test',
                url: url,
                where: {
                    // http://localhost:8080/admin/selectByName/
                    // %E6%AD%A6%E6%B1%89?page=1&limit=10&b=%E6%AD%A6%E6%B1%89
                    //设定异步数据接口的额外参数，任意设，简单的说就是在发送一个get数据
                    // 这样的话实际是三个get参数 data.php?page=1&limit=10&b=11，这里的b是字段
                    name: val,  // 等于武汉
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

        var url = '';   //添加用户或者修改数据请求的地址
        var mainIndex = ''; //弹出层，添加用户和修改用户中会出现数据重合，所以定义以重载
        /* 页面跳转user/index.html开始 */

        /* 页面跳转user/index.html结束 */

        // 添加用户
        function openAddUser() {
            mainIndex = layer.open({
                type: 1,
                title: '添加用户',
                content: $("#saveOrupdateDiv"),
                // area:['100px' ],
                success() {
                    // 清空表单数据。即修改用户时数据会显示在这里，因此要去除
                    $("#dataForm")[0].reset(); //转换为js jquery中没有submit方法
                    url = '/admin/add';
                }
            })
        }

        // 修改用户
        function openUpdateUser(data) {
            mainIndex = layer.open({
                type: 1,
                title: '修改用户',
                content: $("#saveOrupdateDiv"),
                // area:['600px' ],
                //     layer.confirm('真的删除行么', function (index) {
                //         // 删除数据
                //         $.post("/delete/",{"wid":data.wid},function (data) {
                //             obj.del();
                //             layer.msg(data.message);
                //         },"json");
                //         layer.close(index);
                //     });
                // } else if (obj.event === 'edit') {
                //     openUpdateUser(data);
                // }
                success: function () {
                    form.val('dataForm', {
                        id: data.a,
                        name: data.b,
                        sex: data.sex,
                    })
                    // console.log(form.val('dataForm',data)); //如果name名字等于键的名字可以直接这样覆盖
                    url = '/admin/update'
                }
            })
        }


    });
</script>

